<template>
	<view>
		<navbar :scrollTop="scrollY" :isLove="isLove"></navbar>
		<view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true"
				:style="'height:' + height + 'px;'" @scroll="scroll" >
				<!-- 轮播 -->
				<productBg></productBg>
				<!-- 标题 区域 -->
				<view class="product-info mb-24">
					<!-- 标题 -->
					<view class="acea-row row-middle row-between title-box">
						<view class="title line2">
							<!-- <view class="red-tag">好铺优选</view> -->
							<view class="title-text line2">出售 丨 二手餐桌椅10套九成新</view>
						</view>
						<view class="acea-row row-middle row-between share-btns">
							<view>
								<image src="../static/images/wechat_icon.png" mode=""></image>
								<view>微信</view>
							</view>
							<view>
								<image src="../static/images/report_icon.png" mode=""></image>
								<view>举报</view>
							</view>
						</view>
					</view>
					<!-- 价钱 获得金币 -->
					<view class="acea-row row-middle pd-t-b-24 border-b">
						<view class="service-price">
							<text>1000</text>元
						</view>
						<view class="gold-coin">
							<image src="@/static/images/goldcoin_icon.png" mode=""></image>
							<view class="num">25800</view>
						</view>
					</view>
					
					<!-- 浏览、咨询统计 -->
					<view class="acea-row row-middle row-between visit-box border-b mb-24">
						<view class="visit-advtar">
							<image src="@/static/images/f.png" mode="" v-for="(item,index) in visitInfo" :key="index" :style="{left: (20 * index) + 'rpx'}"></image>
						</view>
						<view class="acea-row row-middle row-between visit-l">
							<view class="visit-num">18288人浏览</view>
							<view class="visit-num">5866人咨询</view>
						</view>
					</view>
					<!-- 特色 -->
					<view class="acea-row type-list">
						<text>特色：</text>
						<view class="type-r">
							免租一个月
						</view>
						<view class="type-r">
							商业街店铺
						</view>
						<view class="type-r">
							免租一个月
						</view>
						<view class="type-r">
							商业街店铺
						</view>
					</view>
				</view>
				
				<!-- 商品详情 -->
				<view class="module-box white-bg mb-24">
					<view class="module-title">商品详情</view>
					<view class="acea-row row-middle row-between pd-t-b-24">
						<view class="label">商品名称</view>
						<view class="text">餐桌椅</view>
					</view>
					<view class="acea-row row-middle row-between">
						<view class="label">服品类别</view>
						<view class="text">酒楼餐饮/餐桌椅</view>
					</view>
					<view class="acea-row row-middle row-between pd-t-b-24 border-b">
						<view class="label">物品数量</view>
						<view class="text">50套</view>
					</view>
					
					<view class="supplement pd-t-b-24">
						<view class="label">补充详情</view>
						<view class="text pd-t-b-24">
							店铺优价出租，先到先得，位于汽车西站地下商业街，人流量很多，面积50㎡，租金季付...
						</view>
					</view>
				</view>
				
				<!-- 交易地址  -->
				<view class="module-box white-bg">
					<!-- 发布人信息 -->
					<view class="acea-row row-middle release-person pd-t-b-24 border-b">
						<image src="@/static/images/f.png" mode=""></image>
						<view class="info">
							<view class="name">高先生 <text>(一天前来过)</text></view>
							<view class="send-time">发布于2022-05-23</view>
						</view>
					</view>
					<!-- 交易地址 -->
					<view class="acea-row row-top row-between address">
						<view class="address-l line2">交易地址：长沙市岳麓区汽车西站</view>
						<view class="acea-row row-middle distance">
							<image src="../static/images/red_location.png" mode=""></image>
							<view>1.4km</view>
						</view>
					</view>
					<!-- 地图 -->
					<view class="page-section page-section-gap">
						<map style="width: 100%; height: 172px;" id="map" :scale="mapScale" :latitude="latitude" :longitude="longitude" :markers="covers">
						</map>
					</view>
				</view>
				<!-- 联系人 -->
				<!-- 联系人 -->
				<view class="module-box white-bg mb-24">
					<contacts-list></contacts-list>
				</view>
				
				<!-- 推荐 -->
				<view class="goods">
					<view class="acea-row row-between goods-top">
						<view class="acea-row row-middle tabs">
							<view :class="['tab',goodsTabOn==index?'tab-on':'']" v-for="(item,index) in goodsTab" :key="index" @click="goodsTabOn=index">{{item}}</view>	
						</view>	
						<!-- <view class="shop-btn">
							金币商城
						</view>	 -->
					</view>
					<recommend></recommend>
				</view>
				
				<view class="uni-p-b-98"></view>
			</scroll-view>	
		</view>
		<detail-footer></detail-footer>
	</view>
</template>

<script>
	import navbar from '../components/navbar/navbar.vue'
	import detailFooter from '../components/footer/footer.vue'
	import contactsList from '../components/contactsList/contactsList.vue'
	import recommend from '../components/recommend/recommend.vue'
	import productBg from '../components/productBg/productBg.vue'
	export default {
		components:{
			navbar,
			detailFooter,
			contactsList,
			recommend,
			productBg,
		},
		data() {
			return {
				scrollY:0,
				scrollTop:0,
				isLove:false,
				height:0,
				opacity:0,
				visitInfo:[1,2,3,4,5,6,7,8,9,8],
				goodsTabOn:0,
				goodsTab:['为你推荐','附近推荐'],
				goodsList:[1,2],
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				markerId:'',
				mapScale:12,
				covers: [{
					id:1,
					name:'测试',
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/images/location_gray.png'
				}],
			};
		},
		onLoad(options) {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
				}
			});
		},
		methods:{
			scroll: function(e) {
				var that = this,
					scrollY = e.detail.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
				that.$set(that, 'scrollY', scrollY);
			},
		}
	}
</script>

<style lang="scss">
@import "../static/css/index.scss";
// 金币
.gold-coin{
	width: 148rpx;
	max-width: 100%;
	padding: 4rpx 12rpx;
	// height: 36rpx;
	border-radius: 20rpx;
	background: rgba(255, 195, 0, 1);
	border: 1px solid rgba(255, 235, 59, 1);  
	position: relative;
	margin-left: 6rpx;
	image{
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		left: 0;
		top: 0;
	}
	.num{
		margin-left: 36rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
}

// 特色
.type-list{
	// padding: 12rpx 0;
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(250, 92, 103, 1);
}
.type-r{
	font-size: 22rpx;
	font-weight: 400;
	color: rgba(238, 33, 45, 1);
	padding: 0 12rpx;
	height: 36rpx;
	line-height: 36rpx;
	text-align: center;
	border-radius: 4rpx;
	background: rgba(255, 232, 234, 1);
	letter-spacing: 0.4rpx;
	margin-right: 14rpx;
	margin-bottom: 10rpx;
	white-space: nowrap;
}
.release-person{
	image{
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
	}
	.info{
		margin-left: 18rpx;
		.name{
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(38, 38, 40, 1);
			text{
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(212, 212, 212, 1);
			}
		}
		.send-time{
			font-size: 24rpx;
			font-weight: 400;
			line-height: 42rpx;
			color: rgba(166, 166, 166, 1);
		}
	}
}
</style>
